<template>
  <div class="message-area-container">
    <DataForm v-on="$listeners"></DataForm>
    <h3>
      {{ title }}
      <span>({{ total }})</span>
    </h3>
    <DataList :list="list"></DataList>
    <div class="loading" ref="loading" v-loading="isListLoading">
      {{ text }}
    </div>
  </div>
</template>

<script>
import DataForm from "./DataForm";
import DataList from "./DataList";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    total: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
    isListLoading: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
    },
  },
  components: {
    DataForm,
    DataList,
  },
};
</script>

<style scoped lang="less">
.message-area-container {
  // width: 100%;
  .loading {
    height: 120px;
    width: 100%;
    position: relative;
    color: red;
    line-height: 120px;
    text-align: center;
    font-size: 14px;
  }
}
</style>